<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-on指令补充</title>


</head>

<body>

  <div id="app">
    <input @click="doIt(666,'老铁')" type="button" value="点击">
    <!-- onkeyup 当一个键被释放时， keyup事件被触发
        事件的后面跟上 .修饰符可以对事件进行限制
    -->
    <input @keyup.enter="sayHi" type="text">

    <!-- 1.如果事件直接绑定函数名称, 那么默认会传递事件对象作为事件函数的第一个函数 -->
    <button @click="handle1">点击1</button>
    <!-- 2.如果事件绑定函数调用, 那么事件对象必须作为最后一个参数显式传递, 并且事件对象的名字必须是$event -->
    <button @click="handle2(123, 456, $event)">点击2</button>

    <form v-on:submit.prevent="onsubmit">
      用户名: <input @keyup.enter.space="doIt(666,'老铁')" type="text" value="">
      <button type="submit">提交</button>
    </form>


  </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>

  var app = new Vue({
    el: "#app",
    data: {
      imgSrc: "img/github.png",
      imaTitle: "llhuang10",
      isActive: false
    },
    methods: {
      doIt: function (p1, p2) {
        console.log("coding!");
        console.log(p1);
        console.log(p2);
      },
      sayHi: function () {
        alert("吃了没");
      },
      handle1(event) {
        console.log(event.target.innerHTML);
      },
      handle2(p, p1, event) {
        console.log(p, p1);
        console.log(event.target.innerHTML);
      },
      onsubmit() {

      }
    }


  });
</script>
</html>
